<template>
  <headPage></headPage>
  <div class="main_box">
    <div class="search_input" v-loading="loading">
      <div class="search">
        <div class="search_le">
          <el-input
            v-model="keyword"
            placeholder="搜索你想要的课程"
            placeholder-style="color:#999;font-size:10px;"
            @keyup.enter="confirmSearch"
          />
        </div>
        <div class="search_ri" @click="confirmSearch">
          <span>搜索</span>
        </div>
      </div>
      <div class="history">
        <div class="history_title">
          <span v-if="searchHistory.length > 0">历史搜索</span>
          <span class="no_tips" v-if="searchHistory.length == 0"
            >暂无搜索历史</span
          >
          <img
            v-if="searchHistory.length > 0"
            @click="delSearch"
            src="../../assets/home/21.png"
            alt=""
          />
        </div>
        <div class="history_list">
          <div
            class="search_item"
            v-for="(item, index) in searchHistory"
            :key="index"
          >
            <span @click="goSearch(item.guanjianci)">{{ item.guanjianci }}</span>
            <img
              @click="delOneSearch(item.aid)"
              src="../../assets/home/22.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <footerPage></footerPage>
  <modalText
    ref="modal"
    text="确认删除历史记录？"
    tip="提示"
    @confirm="confirmDel"
  ></modalText>
</template>
  
  <script name="searchCourse" setup>
import {
  post65f03f3e91844,
  post65f03fa44ebf5,
  post661917b19210e,
} from "@/utils/api.js";
import { ref, onMounted, inject } from "vue";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import modalText from "@/components/modalText.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const injectMessage = inject("$message");

onMounted(() => {
  getSearchHistory();
});
// 获取搜索历史
let loading = ref(true);
let searchHistory = ref([]);
function getSearchHistory() {
  post65f03f3e91844({})
    .then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        searchHistory.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

let keyword = ref("");
function confirmSearch() {
  if (!keyword.value) {
    injectMessage.error("请输入搜索的课程");
    return;
  }
  router.push({
    path: "/searchResult",
    query: {
      keyword: keyword.value,
    },
  });

  // post65f03fa44ebf5({
  //   guanjianci: keyword.value,
  // })
  //   .then((res) => {
  //     // console.log(res);
  //     if (res.code == 1) {
  //       router.push({
  //         path: "/searchResult",
  //         query: {
  //           keyword: keyword.value,
  //         },
  //       });
  //     }
  //   })
  //   .catch((err) => {
  //     console.log(err);
  //   });
}
function goSearch(keyword) {
  router.push({
    path: "/searchResult",
    query: {
      keyword: keyword,
    },
  });
}

let modal = ref(null);
let search_id = ref("");
let del_type = ref(1);
function delSearch() {
  del_type.value = 2;
  modal.value.openModal();
}
function delOneSearch(aid) {
  search_id.value = aid;
  del_type.value = 1;
  modal.value.openModal();
}
// 删除历史搜索
function confirmDel() {
  post661917b19210e({
    aid: del_type.value == 1 ? search_id.value : "",
    type: del_type.value,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        injectMessage.success(res.msg);
        loading.value = true;
        getSearchHistory();
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
</script>
  
  <style lang="scss" scoped>
.search_input {
  background: #fff;
  padding: 20px 0 14px;
  margin: 110px 0 13px;
  .search {
    width: 524px;
    height: 30px;
    background: #f6f7f9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    .search_le {
      font-size: 10px;
      width: 459px;
    }
    .search_ri {
      width: 65px;
      height: 30px;
      position: relative;
      background: #1f52ae;
      border-radius: 0px 3px 3px 0px;
      font-size: 10px;
      color: #fff;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
    }
  }
  .history {
    width: 524px;
    margin: 14px auto 10px;
    min-height: 160px;
    .history_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 9px;
      img {
        width: 8px;
        height: 8px;
        cursor: pointer;
      }
      span {
        font-weight: 500;
      }
      .no_tips {
        font-size: 8px;
        color: #999;
      }
    }
    .history_list {
      overflow: hidden;
      margin-top: 12px;
      .search_item {
        float: left;
        font-size: 8px;
        padding: 4.5px 9px;
        display: flex;
        align-items: center;
        background: #f6f7f9;
        border-radius: 2px;
        margin: 0 8px 4px 0;
        cursor: pointer;
        img {
          width: 8px;
          height: 8px;
          cursor: pointer;
          margin-left: 6px;
        }
      }
    }
  }
}
.list_content {
  margin-top: 20px;
  .graduation_date {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
    .date_1 {
      font-size: 9px;
      margin-right: 9px;
    }
    .date_2 {
      font-size: 9px;
      width: 116px;
      height: 24px;
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 3px;
      padding: 0 3px 0 0;
      img {
        width: 6px;
        height: 6px;
      }
      ::v-deep .el-range__icon {
        display: none !important;
      }
    }
  }
  .list {
    overflow: hidden;
  }
}
</style>
  
  